<template>
  <div id="app">
    <div class="header">
    </div>
    <div class="content">
      <el-form
        ref="form"
        :rules="rules"
        :model="formData"
        class="form"
        label-width="110px">
        <h4 class="title">在线申请起名</h4>
        <el-form-item prop="surname">
          <label slot="label" class="label">姓氏：</label>
          <el-input v-model="formData.surname" style="width:400px;" />
        </el-form-item>
        <el-form-item prop="birth_status">
          <label slot="label" class="label">出生状态：</label>
          <el-radio-group v-model="formData.birth_status">
            <el-radio :label="0">未出生</el-radio>
            <el-radio :label="1">已出生</el-radio>
          </el-radio-group>
          <span class="desc_text">(未出生小孩起名，将会提供多个男孩和女孩姓名供您选择)</span>
        </el-form-item>
        <el-form-item
          v-if="formData.birth_status"
          prop="gender">
          <label slot="label" class="label">性别：</label>
          <el-radio-group v-model="formData.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="expects">
          <label slot="label" class="label">冀语：</label>
          <el-input
            v-model="formData.expects"
            placeholder="期望寓意"/>
        </el-form-item>
        <el-form-item v-if="formData.birth_status">
          <label slot="label" class="label">生日：</label>
          <el-date-picker
            v-model="formData.birthday"
            type="datetime"
          />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item>
            <label slot="label" class="label">起名字数：</label>
              <el-select v-model="formData.length">
                <el-option :value="2" label="两个字" />
                <el-option :value="3" label="三个字" />
                <el-option :value="4" label="四个字" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item prop="stable_word">
              <label slot="label" class="label">固定字：</label>
              <el-input v-model="formData.stable_word" style="width: 50px;" />
              <el-select
                v-model="formData.stable_place"
                style="margin-left: 10px;"
                placeholder="请选择固定字位置">
                <el-option :value="0" label="无限制" />
                <el-option :value="1" label="固定中间" />
                <el-option :value="2" label="固定末尾" />
              </el-select>
              <span class="desc_text">(没有固定字可不选)</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label-width="0">
           <button type="button" class="btn-confirm" @click="confirm">
             <img :src="btn" alt="">
           </button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="名字列表"
      :visible.sync="visible"
      width="70%"
    >
      <el-table
        :data="tableData"
      >
        <el-table-column
          type="index"
          label="序号"
          width="50"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="80"
        >
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="weight"
          label="评分"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="explain"
          label="名字解析"
          width="150"
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.explain"
              :key="index"
            >
              {{ `${item.word}-五行属${item.elements}-${item.strokes}画` }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="quoto"
          label="引用"
        >
          <template slot-scope="scope">
            <div
              v-for="(item, index) in scope.row.quoto"
              :key="index"
            >
              <span v-html="item.replace(/\<em\>/g, `<em style='color: red;font-weight: bold;'>`)"></span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
import btn from "@/assets/btn.png"
export default {
  data () {
    return {
      btn,
      formData: {
        surname: '',
        birth_status: 0,
        gender: 0,
        expects: '',
        birthday: new Date(),
        length: '',
        stable_word: '',
        stable_place: ''
      },
      visible: false,
      tid: new Date().getTime(),
      tableData: []
    }
  },
  created () {
    this.rules = {
      surname: [
        { required: true, message: '请输入姓氏' },
        { pattern: /^[\u4e00-\u9fa5]*$/, message: '姓氏只允许输入中文' },
        { max: 4, message: '姓氏最长不能超过4个字符' }
      ],
      expects: [
        { max: 20, message: '冀语最长不能超过20个字符' }
      ],
      stable_word: [
        { pattern: /^[\u4e00-\u9fa5]*$/, message: '固定字只允许输入中文' },
        { max: 1, message: '请输入单个固定字' }
      ]
    }
  },
  methods: {
    confirm () {
      this.$refs.form.validate(res => {
        if (res) {
          axios.post('/intelli-creation/names/v0.2/name',{
            ...this.formData,
            tid: this.tid
          })
            .then(res => {
              this.tableData = res.data.data
              console.log(this.tableData)
              if (this.tableData.length > 0) {
                this.visible = true
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    }
  }
}
</script>
<style lang="scss">
body {
  background: #B7D3EC;
  padding: 45px 0;
}
.title {
  font-size: 54px;
  font-weight: 700;
  text-align: center;
  line-height: 114%;
  color: #C90004;
  margin: 0 0 20px;
}
.form {
  font-family: "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", arial, helvetica, sans-serif;
  width: 750px;
  background: url("~@/assets/bg.png") no-repeat center top;
  margin: 0 auto;
  padding: 70px 125px;
  background-size: 100%;
  height: 602px;
}
.label {
  color: #444;
  font-size: 18px;
}
.desc_text {
  display: inline-block;
  margin-left: 25px;
  color: #974b0d;
  font-size: 12px;
}
.btn-confirm {
  display: block;
  border: none;
  width: 374px;
  height: 62px;
  background-size: 100% 100%;
  margin: 3px auto;
  margin-top: 30px;
  background: none;
  cursor: pointer;
}
</style>


